<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>维护菜单</title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/common.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="app">
			<el-input style="width: 200px;" v-model="label" placeholder="请输入菜单名称"></el-input> <el-button @click="find"
				icon="el-icon-search" circle></el-button>
			<el-button type="primary" @click="inset" round>新增上级</el-button>
			<el-button type="success"  @click="son" round>新增子级</el-button>
			<el-table :data="menuList" border style="width: 100%">
				<el-table-column prop="id" label="ID" width="180">
				</el-table-column>
				<el-table-column prop="label" label="菜单" width="180">
				</el-table-column>
				<el-table-column prop="href" label="地址">
				</el-table-column>
				<el-table-column prop="parentid" label="上级ID">
				</el-table-column>
				<el-table-column prop="imgicon" label="图标">
				</el-table-column>
				<el-table-column width="250px" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="updateMenu(scope.row)">修改</el-button>
						<el-button size="mini" @click="handleDelete(scope.$index,scope.row)"
							type="danger">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background :page-size="pageSize" layout="total,prev, pager, next" :total="total"
				@current-change="handle">
			</el-pagination>
			<!--新增或修改-->
			<el-dialog title="操作" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

				<el-form ref="form" :model="form" label-width="80px">


					<input type="hidden" v-model="form.id" />
					<el-form-item label="菜单名称">
						<el-input v-model="form.label"></el-input>
					</el-form-item>
					<el-form-item v-if="insertson" label="地址">
						<el-input v-model="form.href"></el-input>
					</el-form-item>
					<el-form-item v-if="insertson" label="父级">
						 <el-select v-model="value" placeholder="请选择父级">
						    <el-option
						      v-for="item in options"
						      :key="item.id"
						      :label="item.label"
						      :value="item.id">
						    </el-option>
						  </el-select>
						  <el-button v-if="insertson" @click="allm" size="mini">所有</el-button>
					</el-form-item>
					<el-form-item label="图标">
						<el-input v-model="form.imgicon"></el-input>
					</el-form-item>

				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addUp">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				value:"",
				options:[],
				insertson:false,
				dialogVisible: false,
				form: {
					id: "",
					label: "",
					href: "",
					parentid: 0,
					imgicon: ""
				},
				label: "",
				menuList: [],
				total: 0,
				pageSize: 5,
				page: 1,
				all:1,
				update:false
			},
			mounted() {
				this.initdata();
			},
			methods: {
				initMenu(){
					axios.get(API + "s/selectMenu?all=" + this.all ).then(res => {
						console.log(res.data);
						this.options=res.data.data.pageInfo;
					})
				},
				initdata() {
					axios.get(API + "s/selectAllMenu?page=" + this.page + "&label=" + this.label).then(res => {
						this.menuList = res.data.data.pageInfo.list;
						this.total = res.data.data.pageInfo.total;
					})
				},
				handle(res) {
					this.page = res;
					this.initdata()
				},
				find() {
					this.label = this.label == null ? "" : this.label;
					this.initdata();
				},
				handleDelete(index, row) {
					this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios.post(API + "s/deleteMenu", row).then(res => {
							if (res.data) {
								this.$message.success("删除成功")
								this.initdata();
							} else {
								this.$message("删除失败")
							}
						})
					})
				},
				handleClose(done) {
					this.$confirm('确认关闭？')
						.then(_ => {
							//done();
						})
						.catch(_ => {});
				},
				addUp() {
					//新增上级
					if(this.insertson){
						this.form.parentid=this.value;
					}
					if(this.update){
						axios.post(API + "s/updatemeun", this.form).then(res => {
							if (res.data) {
								this.$message("修改成功")
								this.dialogVisible = false;
								this.initdata();
							} else {
								this.$message("修改失败")
							}
							
						})
						return;
					}
					axios.post(API + "s/insertmeun", this.form).then(res => {
						if (res.data) {
							this.$message("新增成功")
							this.dialogVisible = false;
							this.initdata();
						} else {
							this.$message("新增失败")
						}
					})
				},
				inset() {
					this.form = {
						id: "",
						label: "",
						href: "",
						parentid: "",
						imgicon: ""
					}
					this.update=false;
					this.form.parentid=0;
					this.insertson=false;
					this.dialogVisible = true;
				},son(){
					this.update=false;
					this.all=1;
					this.form = {
						id: "",
						label: "",
						href: "",
						parentid: "",
						imgicon: ""
					}
					this.initMenu();
					this.insertson=true;
					this.dialogVisible = true;
				},allm(){
					this.all=2;
					this.initMenu();
				},updateMenu(row){
					this.form = {
						id: row.id,
						label: row.label,
						href: row.href,
						parentid: row.parentid,
						imgicon: row.imgicon,
					}
					this.insertson=true;
					this.value=this.form.parentid;
					this.initMenu();
					this.dialogVisible = true;
					this.update=true;
				}
			}
		})
	</script>
</html>